﻿@model IEnumerable<MPR.Poker.Model.SYS.SYS_DisplayConfig>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}


@(Html.Kendo().Grid<MPR.Poker.Model.SYS.SYS_DisplayConfig>(Model)
    .Name("DisplayConfig")
    .ToolBar(toolbar => 
    { 
        toolbar.Custom().HtmlAttributes(new { id = "SaveChange" }).Text("<span class='k-icon k-i-tick'></span> Lưu thay đổi");
        toolbar.Custom().HtmlAttributes(new { id = "CloseWindow" }).Text("<span class='k-icon k-i-cancel'></span> Đóng");
    })
    .Columns(columns =>
        {
            columns.Bound(c => c.OrderIndex).Title("Thứ tự").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" })
                .ClientTemplate("<input class='numericOrder' id='OrderIndex' value='#=OrderIndex#' name='OrderIndex' style='width:60px'/>").Width(60);

            columns.Bound(c => c.IsVisible).Title("Hiển thị").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" })
                .ClientTemplate("<input id='IsVisible' type='checkbox' #=IsVisible ? checked='checked' : '' # />").Width(40);

            columns.Bound(c => c.ColumnName).Title("Tên cột").HeaderHtmlAttributes(new { style = "text-align:center" });

            columns.Bound(c => c.DisplayName).Title("Tên hiển thị").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" })
                .ClientTemplate("<input type='text' id='DisplayName' value='#=DisplayName#' style='width:150px'/>").Width(150);

            columns.Bound(c => c.ColumnWidth).Title("Độ rộng").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" })
                .ClientTemplate("<input class='numericWidth' id='ColumnWidth' value='#=ColumnWidth#' name='ColumnWidth' style='width:80px'/>").Width(80);

            columns.Bound(c => c.HeaderAlign).Title("Canh tiêu đề").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center", @class = "comboCell" })
                .ClientTemplate(Html.Kendo().ComboBox()
                                    .HtmlAttributes(new { style = "width:80px" })
                                    .BindTo(Enum.GetNames(typeof(PokerLife.Class.AlignmentTypes)).ToList())
                                    .Name("HeaderAlign_#=IDSys#")
                                    .Value("#=HeaderAlign#")
                                    .ToClientTemplate().ToHtmlString()
                ).Width(90);

            columns.Bound(c => c.DataAlign).Title("Canh dữ liệu").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center", @class = "comboCell" })
                .ClientTemplate(Html.Kendo().ComboBox()
                                    .HtmlAttributes(new { style = "width:80px" })
                                    .BindTo(Enum.GetNames(typeof(PokerLife.Class.AlignmentTypes)).ToList())
                                    .Name("DataAlign_#=IDSys#")
                                    .Value("#=DataAlign#")
                                    .ToClientTemplate().ToHtmlString()
                ).Width(90);

            columns.Bound(c => c.DataFormat).Title("Format").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" })
                .ClientTemplate("<input type='text' id='DataFormat' value='#=DataFormat == null ? \"\" : DataFormat#' style='width:80px'/>").Width(80); ;

            columns.Bound(c => c.TextColor).Title("Màu chữ").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" })
                .ClientTemplate("<input class='colorPicker' id='TextColor' value='#=TextColor#' />").Width(60);

            columns.Bound(c => c.ColumnType).Title("Loại cột").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center", @class = "comboCell" })
                .ClientTemplate(Html.Kendo().ComboBox()
                                    .HtmlAttributes(new { style = "width:80px" })
                                    .BindTo(Enum.GetNames(typeof(PokerLife.Class.ColumnType)).ToList())
                                    .Name("ColumnType_#=IDSys#")
                                    .Value("#=ColumnType#")
                                    .ToClientTemplate().ToHtmlString()
                ).Width(90);
            
        }
    )
    .Events(events => events.DataBound("onDataBound"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
            {
                model.Id(c => c.IDSys);
            })
        .Read(read => read.Action("DisplayConfig_Read", "DisplayConfig").Data("getData"))
     )
)

<script type="text/javascript">
    $('#CloseWindow').click(function (e) {
        e.preventDefault();
        window.parent.$("#windowformat").data("kendoWindow").close();
    });

    $('#SaveChange').click(function (e) {        
        e.preventDefault();

        //window.parent.configChange(true);

        var configs = new Array();        
        

        $('#DisplayConfig tbody tr').each(function () {
            var config = {};
            var tr = $(this);
            var gridData = $("#DisplayConfig").data("kendoGrid");
                                    
            var id = gridData.dataItem(tr).IDSys;            
                       
            config.IDSys = id;
            config.TableName ="@ViewBag.TableName";
            config.LanguageIDSys = 1;
            config.OrderIndex = $(this).find('#OrderIndex').val();
            config.IsVisible = $(this).find('#IsVisible').is(':checked');
            config.ColumnName = gridData.dataItem(tr).ColumnName;
            config.DisplayName = $(this).find('#DisplayName').val();
            config.ColumnWidth = $(this).find('#ColumnWidth').val();
            config.HeaderAlign = $(this).find('#HeaderAlign_' + id).val();
            config.DataAlign = $(this).find('#DataAlign_' + id).val();
            config.ColumnType = $(this).find('#ColumnType_' + id).val();
            config.DataFormat = $(this).find('#DataFormat').val();
            config.TextColor = $(this).find('#TextColor').val();
            config.IsEdit = $(this).find('#IsEdit').is(':checked');
            config.IsNewCol = gridData.dataItem(tr).IsNewCol;
            configs.push(config);
        });
                
        configs = JSON.stringify(configs);

        $.ajax({
            url: '@Url.Content("~/DisplayConfig/SaveChange")',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: configs,
            traditional: true,
            success: function () {
                $.when(kendo.ui.ExtAlertDialog.show({ title: "Thông báo", message: "Cập nhật điều chỉnh thành công !" }))
                .done(function (respone) {
                    window.parent.$("#window").data("kendoWindow").close();
                });
                         
            },
            error: function (event, request, settings) {
                alert(settings);
            }
        });
    });

    function onDataBound(e) {
        var grid = this;
        $(".comboCell").each(function () {
            eval($(this).children("script").last().html());
            var tr = $(this).closest('tr');
            var item = grid.dataItem(tr);
            kendo.bind($(this), item);
        });

        grid.tbody.find('.numericOrder').each(function () {
            $(this).kendoNumericTextBox({
                format: "0",
                min: 0,
                decimals: 0
            });
        });
        grid.tbody.find('.numericWidth').each(function () {
            $(this).kendoNumericTextBox({
                format: "0",
                decimals: 0,
                min: 0,
                step: 10
            });
        });
        grid.tbody.find('.colorPicker').each(function () {
            $(this).kendoColorPicker({
                buttons: false
            });
        });
    }

    function getData() {
        return { TableName: "@ViewBag.TableName", LanguageID: 1 , ColumnLists: "@ViewBag.ColumnLists" };
    }

    //function LanguageSelect(e) {
    //    $("#DisplayConfig").data("kendoGrid").dataSource.read();
    //}


</script>

<style>
    #DisplayConfig {
        width:1100px;
    }
</style>
